<template>
  <view class="register-container">
    <!-- 背景图 -->
    <image src="/static/auth-bg.jpg" class="bg-image" mode="aspectFill" />
    
    <!-- 注册卡片 -->
    <view class="card">
      <!-- 标题 -->
      <view class="header">
        <text class="title">注册账号</text>

      </view>
      
      <!-- 表单区域 -->
      <view class="form">
        <!-- 手机号 -->
        <view class="form-item" :class="{ 'error': errors.phone }">
          <input 
            v-model="form.phone" 
            placeholder="请输入手机号" 
            type="number" 
            maxlength="11"
            @blur="validate('phone')"
          />
          <text class="error-msg">{{ errors.phone }}</text>
        </view>
        
        <!-- 验证码 -->
        <view class="form-item captcha-item" :class="{ 'error': errors.captcha }">
          <input
            v-model="form.captcha"
            placeholder="请输入验证码"
            @blur="validate('captcha')"
          />
          <button 
            class="captcha-btn" 
            :disabled="isCounting"
            @click="getCaptcha"
          >
            {{ isCounting ? `${countdown}s后重试` : '获取验证码' }}
          </button>
        </view>
        
        <!-- 密码 -->
        <view class="form-item" :class="{ 'error': errors.password }">
          <input
            v-model="form.password"
            placeholder="请设置登录密码（6-20位）"
            password
            @blur="validate('password')"
          />
          <text class="error-msg">{{ errors.password }}</text>
        </view>
        
        <!-- 确认密码 -->
        <view class="form-item" :class="{ 'error': errors.confirmPassword }">
          <input
            v-model="form.confirmPassword"
            placeholder="请再次输入密码"
            password
            @blur="validate('confirmPassword')"
          />
          <text class="error-msg">{{ errors.confirmPassword }}</text>
        </view>
      </view>
      
      <!-- 注册按钮 -->
      <button 
        class="register-btn" 
        :disabled="!isFormValid || isSubmitting"
        :loading="isSubmitting"
        @click="handleRegister"
      >
        {{ isSubmitting ? '注册中...' : '立即注册' }}
      </button>
      
      <!-- 已有账号登录 -->
      <view class="footer">
        <text>已有账号？</text>
        <text class="login-link" @click="navigateToLogin">立即登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import http from '@/utils/http'

// 表单数据
const form = reactive({
  phone: '',
  captcha: '',
  password: '',
  confirmPassword: ''
})

// 错误提示
const errors = reactive({
  phone: '',
  captcha: '',
  password: '',
  confirmPassword: ''
})

// 状态控制
const isCounting = ref(false)
const countdown = ref(60)
const isSubmitting = ref(false)
let timer = null

// 表单验证规则
const rules = {
  phone: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
  ],
  captcha: [
    { required: true, message: '请输入验证码' },
    { pattern: /^\d{6}$/, message: '验证码为6位数字' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { min: 6, max: 20, message: '密码长度为6-20位' }
  ],
  confirmPassword: [
    { validator: (val) => val === form.password, message: '两次密码不一致' }
  ]
}

// 验证表单字段
const validate = (field) => {
  const value = form[field]
  errors[field] = ''

  for (const rule of rules[field]) {
    if (rule.required && !value) {
      errors[field] = rule.message
      break
    }
    
    if (rule.pattern && !rule.pattern.test(value)) {
      errors[field] = rule.message
      break
    }
    
    if (rule.validator && !rule.validator(value)) {
      errors[field] = rule.message
      break
    }
  }
}

// 获取验证码
const getCaptcha = () => {
  validate('phone')
  if (errors.phone) return

  isCounting.value = true
  countdown.value = 60
  
  // 模拟发送验证码
  uni.showToast({ title: '验证码已发送', icon: 'none' })
  
  // 倒计时
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      isCounting.value = false
      countdown.value = 60
    }
  }, 1000)
}

// 表单是否有效
const isFormValid = computed(() => {
  return Object.values(errors).every(error => !error) && 
         Object.values(form).every(field => field)
})

// 提交注册

// 跳转登录页
const navigateToLogin = () => {
  uni.redirectTo({ url: '/pages/login/login' })
}
</script>

<style lang="scss" scoped>
.register-container {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;
}

.card {
  width: 85%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.header {
  margin-bottom: 50rpx;
  text-align: center;
  .title {
    display: block;
    font-size: 42rpx;
    font-weight: bold;
    color: #333;
  }
 
}

.form-item {
  margin-bottom: 30rpx;
  position: relative;
  
  input {
    width: 100%;
    height: 80rpx;
    padding: 0 20rpx;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
    background: #f9f9f9;
    font-size: 28rpx;
    
    &:focus {
      border-color: #007AFF;
    }
  }
  
  &.error input {
    border-color: #ff4d4f;
  }
  
  .error-msg {
    color: #ff4d4f;
    font-size: 24rpx;
    margin-top: 8rpx;
    display: block;
    height: 30rpx;
  }
}

.captcha-item {
  display: flex;
  align-items: center;
  
  input {
    flex: 1;
    margin-right: 20rpx;
  }
  
  .captcha-btn {
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 26rpx;
    color: #007AFF;
    background: #f0f7ff;
    border: none;
    
    &[disabled] {
      color: #999;
      background: #f5f5f5;
    }
  }
}

.register-btn {
  margin-top: 50rpx;
  height: 90rpx;
  line-height: 90rpx;
  color: #fff;
  background: linear-gradient(to right, #007AFF, #00A0FF);
  border-radius: 45rpx;
  font-size: 32rpx;
  
  &[disabled] {
    opacity: 0.7;
  }
}

.footer {
  text-align: center;
  margin-top: 40rpx;
  color: #999;
  font-size: 26rpx;
  
  .login-link {
    color: #007AFF;
    margin-left: 10rpx;
  }
}
</style>
